<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta name="format-detection" content="telephone=no">
		<title>51微贷</title>
		<link rel="stylesheet" type="text/css" href="../css/reset.css">
		<link rel="stylesheet" type="text/css" href="../css/common.css">
		<script type="text/javascript" src="../js/rem.js"></script>
	</head>
	<style>
		.m-passport .close-icon {
			display: inline-block;
		}
	</style>

	<body>
		<div class="m-passport">
			<h3 class="title">
				<span class="f-fl" @tap="back()">取消</span>
			</h3>
			<div class="logo"><img src="../images/logo.png"></div>
			<div class="input-box">
				<ul>
					<li>
						<i class="icon phone-icon"></i>
						<input type="tel" class="number" placeholder="请输入手机号登录或注册" v-model="mobile">
						<i v-if="mobile" class="close-icon f-pa" @tap="empty()"></i>
					</li>
				</ul>
			</div>
			<a v-if="mobile" class="btn btn-1 active" @tap="next()">下一步</a>
			<a v-else class="btn btn-1" @tap="next()">下一步</a>
			<ul class="advantage">
				<li>
					<i class="passpart-icon passpart-icon-1"></i>
					<p>小额理财</p>
					<p>100元起投</p>
				</li>
				<li>
					<i class="passpart-icon passpart-icon-2"></i>
					<p>资金安全</p>
					<p>用户本息零损失</p>
				</li>
				<li>
					<i class="passpart-icon passpart-icon-3"></i>
					<p>IT数据风控系统</p>
					<p>多方位监测</p>
				</li>
			</ul>
		</div>
		<script type="text/javascript" src="../js/md5.min.js"></script>
		<script type="text/javascript" src="../js/mui.min.js"></script>
		<script type="text/javascript" src="../js/vue.min.js"></script>
		<script type="text/javascript" src="../js/zepto.min.js"></script>
		<script type="text/javascript" src="../js/common.js"></script>

		<script type="text/javascript">
			mui.plusReady(function() {
				var vm = new Vue({
					el: '.m-passport',
					data: {
						mobile: ''
					},
					methods: {
						back: function() {
							mui.back();
						},

						empty: function() {
							this.mobile = '';
						},

						next: function() {
							document.activeElement.blur();
							var mobile = this.mobile;
							if(mobile == '') {
								mui.toast('请输入手机号');
								return false;
							} else {
								mui.ajax(base + 'passport/checkaccount', {
									data: {
										'mobile': mobile
									},
									dataType: 'json',
									type: 'post',
									headers: sign(md5),
									success: function(data) {
										if(data.result) {
											mui.openWindow({
												url: 'login.html',
												extras: {
													mobile: mobile
												},
												show: {
													aniShow: 'pop-in', //页面显示动画，默认为”slide-in-right“；
													event: "loaded"
												}
											});
										} else {
											mui.openWindow({
												url: 'register.html',
												extras: {
													mobile: mobile
												},
												show: {
													aniShow: 'pop-in', //页面显示动画，默认为”slide-in-right“；
													event: "loaded"
												}
											});
										}
									},
									error: function(data) {
										console.error(data.message);
									}
								});
							}
						}
					}
				});

				//回车事件
				window.addEventListener('keyup', function(event) {
					if(event.keyCode == 13) {
						return vm.next();
					}
				}, false);
			});
		</script>
	</body>

</html>